<template>
  <div class="org-role-container">
    <AdminLoading :loading="deptLoading || employeeLoading" />
    <div class="org-role-tree-container">
      <div class="tree-data-container">
        <Tree :data="orgData" :render="onRenderContent" @on-select-change="onSelectDept"></Tree>
      </div>
    </div>
    <div class="org-role-content-container">
      <div class="org-bread">
        <div style="display: flex; align-items: center;">
          <h5 v-if="!isEditing">{{ activeDept.deptName }}</h5>
          <Input v-else style="width: 200px;" v-model="deptName" />
          <div style="margin-left: 5px;" v-if="!isEditing">
            <Button size="small" type="primary" @click="onChangeDeptName" style="margin-right: 8px;" v-if="hasT_HR">
              <span style="font-size: 12px">编辑</span>
            </Button>
          </div>
          <div style="margin-left: 5px;" v-else>
            <Button type="primary" @click="onConfirmChangeDeptName">确定</Button>
            <Button @click="onCancelChangeDeptName" style="margin-left: 5px;">取消</Button>
          </div>
        </div>
        <Breadcrumb separator="<b class='breadcrumb-separator'></b>">
          <BreadcrumbItem v-for="(bread, index) in breadData" :key="bread.id"
            :class="{ 'last-breadcrumb': index === breadData.length - 1 }">
            <a @click.stop="onChangeDept(bread.id)" v-if="index !== breadData.length - 1">{{ bread.deptName }}</a>
            <a v-else>{{ bread.deptName }}</a>
          </BreadcrumbItem>
        </Breadcrumb>
      </div>
      <div class="dept">
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
          <h5 style="margin-right: 5px;">下级部门</h5>
          <Button size="small" type="primary" @click="onAddDept" v-if="hasT_HR">
            <span style="font-size: 12px">添加子部门</span>
          </Button>
        </div>
        <Table v-show="deptData.length" row-key="id" :data="deptData" :columns="deptColumns" :loading="deptLoading"
          size="small">
          <template #action="{ row }">
            <div @click.stop.prevent>
              <Poptip confirm title="您确定设置该部门的负责人吗？" transfer @on-ok="onSetDeptSuper(row)">
                <a type="text">设置负责人</a>
              </Poptip>
              <Divider type="vertical" />
              <a style="color: #f90;" @click="onUpdateDept(row)">编辑</a>
              <Divider type="vertical" />
              <Poptip confirm title="您确定删除该部门吗？" transfer @on-ok="onDeleteDept(row.id)">
                <a style="color: #ed4014;">删除</a>
              </Poptip>
            </div>
          </template>
        </Table>
        <p v-show="!deptData.length" style="font-size: 12px;">当前部门不包含子部门，请<a @click="onAddDept">添加子部门</a></p>
      </div>
      <div class="employee">
        <div style="display: flex; align-items: center; margin-bottom: 10px;">
          <h5 style="margin-right: 5px;">部门成员</h5>
          <Button size="small" type="primary" @click="onAddEmployee" v-if="hasT_HR">
            <span style="font-size: 12px">添加成员</span>
          </Button>
        </div>
        <Table v-show="employeeData.length" row-key="id" :data="employeeData" :columns="employeeColumns"
          :loading="employeeLoading" size="small">
          <template #status="{ row }">
            <Badge status="success" v-if="row.status === 0">
              <template #text>
                <span style="font-size: 12px;">在职</span>
              </template>
            </Badge>
            <Badge status="error" v-else>
              <template #text>
                <span style="font-size: 12px;">离职</span>
              </template>
            </Badge>
          </template>
          <template #action="{ row }">
            <div @click.stop.prevent>
              <a @click="onAssignEmployeeRole(row)">分配角色</a>
              <Divider type="vertical" />
              <Poptip v-if="hasT" confirm :title="`您确定删除${row.name}吗？`" transfer @on-ok="onDeleteDeptEmployee(row)"
                placement="top-end">
                <a style="color: #ed4014;">删除</a>
              </Poptip>
            </div>
          </template>
        </Table>
        <p v-show="!employeeData.length" style="font-size: 12px;">当前部门没有成员，请<a @click.prevent="onAddEmployee">添加成员</a>
        </p>
      </div>
    </div>
    <Modal :title="`${currentDept.id ? '编辑' : '添加'}子部门`" v-model="deptVisible" @on-cancel="onCancelAddDept"
      :mask-closable="false">
      <Form ref="deptInfo" :model="deptInfo" :rules="deptRules" inline>
        <Row :gutter="16">
          <Col :lg="24" :md="12" :sm="24">
          <FormItem label="部门名称" prop="deptName" style="width: 100%;">
            <Input v-model="deptInfo.deptName" placeholder="请输入部门名称" />
          </FormItem>
          </Col>
          <Col :lg="24" :md="12" :sm="24">
          <FormItem label="备注" prop="remark" style="width: 100%;">
            <Input v-model="deptInfo.remark" placeholder="请输入备注" />
          </FormItem>
          </Col>
        </Row>
      </Form>
      <template #footer>
        <Button type="text" @click="onCancelAddDept">取消</Button>
        <Button type="primary" @click="onConfirmAddDept" :loading="deptLoading">确定</Button>
      </template>
    </Modal>
    <Modal title="添加部门成员" class-name="employee-modal" v-model="employeeVisible" @on-cancel="onCancelAddEmployee"
      width="800" :mask-closable="false">
      <Form ref="employeeInfo" :model="employeeInfo" :rules="employeeRules" inline>
        <FormItem label="部门成员" prop="userIds" style="width: 100%;">
          <CheckboxGroup v-model="employeeInfo.userIds" placeholder="请选择部门成员">
            <Checkbox v-for="item in employeesCanAdd" :key="item.userId" :label="item.userId">
              <span>{{ item.name }}</span>
            </Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <template #footer>
        <Button type="text" @click="onCancelAddEmployee">取消</Button>
        <Button type="primary" @click="onConfirmAddEmployee" :loading="employeeLoading">确定</Button>
      </template>
    </Modal>
    <Modal title="分配成员岗位角色" class-name="employee-role-modal" v-model="employeeRoleVisible"
      @on-cancel="onCancelAddEmployeeRole" width="600" :mask-closable="false">
      <Form ref="employeeRoleInfo" :model="employeeRoleInfo" :rules="employeeRoleRules" inline>
        <FormItem label="成员岗位角色" prop="roleCodeList" style="width: 100%;">
          <CheckboxGroup v-model="employeeRoleInfo.roleCodeList" placeholder="请选择成员岗位角色">
            <Checkbox v-for="item in roles" :key="item.roleCode" :label="item.roleCode">
              <span>{{ item.roleName }}</span>
            </Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <template #footer>
        <Button type="text" @click="onCancelAddEmployeeRole">取消</Button>
        <Button type="primary" @click="onConfirmAddEmployeeRole" :loading="deptLoading">确定</Button>
      </template>
    </Modal>
    <Modal title="新增角色人员" class-name="employee-modal" v-model="userVisible" @on-cancel="onCancelAddUser" width="800"
      :mask-closable="false">
      <Form ref="userInfo" :model="userInfo" :rules="userRules" inline>
        <FormItem label="角色人员" prop="userIds" style="width: 100%;">
          <CheckboxGroup v-model="userInfo.userIds" placeholder="请选择角色人员">
            <Checkbox v-for="item in workUsers" :key="item.userId" :label="item.userId"
              :disabled="userOccupied.includes(item.userId)">
              <span>{{ item.name }}</span>
            </Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <template #footer>
        <Button type="text" @click="onCancelAddUser">取消</Button>
        <Button type="primary" @click="onConfirmAddUser" :loading="deptLoading">确定</Button>
      </template>
    </Modal>
    <Modal title="设置部门负责人" class-name="employee-modal" v-model="superVisible" @on-cancel="onCancelAddSuper"
      :mask-closable="false">
      <Form ref="superInfo" :model="superInfo" :rules="superRules" inline>
        <FormItem label="负责人" prop="supervisorIds" style="width: 100%;">
          <RadioGroup v-model="superInfo.supervisorIds" placeholder="请选择负责人">
            <Radio v-for="item in employeeData" :key="item.userId" :label="item.userId">
              <span>{{ item.name }}</span>
            </Radio>
          </RadioGroup>
        </FormItem>
      </Form>
      <template #footer>
        <Button type="text" @click="onCancelAddSuper">取消</Button>
        <Button type="primary" @click="onConfirmAddSuper" :loading="deptLoading">确定</Button>
      </template>
    </Modal>
  </div>
</template>
<script>
import { resolveComponent } from 'vue';
import { mapState } from 'vuex';
import { hasOneOf } from '@/libs/tools';
import { RolesType } from '@/constants';
import {
  getDeptList,
  saveDept,
  deleteDept,
  saveDeptEmployee,
  getDeptEmployees,
  deleteDeptEmployee,
  getRoleUserList,
  saveRoleUser,
  deleteRoleUser,
  saveEmployeeRole
} from '@/api/org'

export default {
  name: 'org-role',
  data() {
    return {
      RolesType,
      orgData: [],
      breadData: [],
      deptLoading: false,
      deptData: [],
      deptColumns: [
        { title: '组名', key: 'deptName', width: 160, },
        {
          title: '备注',
          key: 'remark',
          minWidth: 200,
          show: true,
          render: (h, { row }) => {
            return h('span', row.remark || '/')
          }
        },
        {
          title: '负责人',
          key: 'supervisorIds',
          width: 160,
          show: true,
          render: (h, { row }) => {
            const userIdName = {}
            this.allUsers.forEach(user => {
              userIdName[user.userId] = user.name
            })
            if (row.supervisorIds) {
              return h('span', userIdName[row.supervisorIds])
            }
            return h('span', '/')
          }
        },
        { title: '创建时间', key: 'createTime', width: 180, show: true },
        {
          title: '操作',
          width: 180,
          key: 'action',
          slot: 'action',
          align: 'center',
          fixed: 'right',
          show: true
        }
      ],
      employeeLoading: false,
      employeeData: [],
      employeeColumns: [
        { type: 'index', width: 60, align: 'center' },
        { title: '姓名', key: 'name', width: 100, show: true },
        { title: '手机号', key: 'phoneNo', width: 100, show: true },
        {
          title: '岗位角色',
          key: 'roleCodeList',
          minWidth: 160,
          show: true,
          render: (h, { row }) => {
            const roleCodeName = {}
            this.roles.forEach(role => {
              roleCodeName[role.roleCode] = role.roleName
            })
            if (row.roleCodeList && row.roleCodeList.length) {
              return h('span', row.roleCodeList.map(r => roleCodeName[r]).join('，'))
            }
            return h('span', {
              style: {
                color: '#f90'
              }
            }, '待定')
          }
        },
        { title: '状态', key: 'status', slot: 'status', width: 120, show: true },
        { title: '创建时间', width: 180, key: 'createTime', show: true },
        {
          title: '操作',
          width: 140,
          key: 'action',
          slot: 'action',
          align: 'center',
          fixed: 'right',
          show: true
        }
      ],
      employeeOccupied: [],
      activeDept: {},
      deptVisible: false,
      deptInfo: {
        deptName: '',
        remark: ''
      },
      deptRules: {
        deptName: [
          { required: true, message: '请输入部门名称' }
        ],
        remark: [
          // { required: true, message: '请输入备注' }
        ]
      },
      currentDept: {},
      superVisible: false,
      superInfo: {
        supervisorIds: ''
      },
      superRules: {
        supervisorIds: [
          { required: true, message: '请选择部门负责人' }
        ]
      },
      activeSuperDept: {},
      employeesCanAdd: [],
      employeeVisible: false,
      employeeInfo: {
        userIds: []
      },
      employeeRules: {
        userIds: [
          { required: true, message: '请选择部门成员', type: 'array' }
        ]
      },
      employeeRoleVisible: false,
      employeeRoleInfo: {
        roleCodeList: []
      },
      employeeRoleRules: {
        roleCodeList: [
          { required: true, message: '请选择成员岗位角色', type: 'array' }
        ]
      },
      activeEmployee: {
        roleCodeList: []
      },
      roleUserData: [],
      roleUserColumns: [
        { title: '姓名', key: 'name', show: true },
        { title: '手机号', key: 'phoneNo', show: true },
        { title: '添加时间', key: 'createTime', show: true },
      ],
      activeRole: {},
      userOccupied: [],
      userVisible: false,
      userInfo: {
        userIds: []
      },
      userRules: {
        userIds: [
          { required: true, message: '请选择角色人员', type: 'array' }
        ]
      },
      isEditing: false,
      deptName: '',
    }
  },
  computed: {
    ...mapState('admin/common', [
      'publicConfig'
    ]),
    ...mapState('admin/user', [
      'info', 'allUsers', 'workUsers'
    ]),
    ...mapState('admin/role', [
      'roles'
    ]),
    hasT() {
      return hasOneOf(this.info.roleCodeList, RolesType.T)
    },
    hasT_HR() {
      return hasOneOf(this.info.roleCodeList, RolesType.T_HR)
    }
  },
  mounted() {
    this.onInitData()
  },
  methods: {
    hasOneOf,
    onRenderContent(h, { root, node, data }) {
      return (
        h('span', [
          h(resolveComponent('Icon'), {
            type: 'ios-folder-outline',
            style: {
              'margin-right': '8px'
            }
          }),
          h('span', data.deptName)
        ])
      )
    },
    onSelectDept(data) {
      if (data[0]) {
        this.activeDept = {
          ...data[0],
          callLineInfo: data[0].callLineInfo || {}
        }
        this.onGetDeptData(data[0].id)
        this.onGetEmployeeData(data[0].id)
      } else {
        this.activeDept.selected = true
      }
      this.activeDept.expand = true
      if (this.isEditing) {
        this.onCancelChangeDeptName()
      }
    },
    onChangeDept(id) {
      if (this.isEditing) {
        this.onCancelChangeDeptName()
      }
      this.activeDept.selected = false
      const activeDept = this.onFindNodeInOrgData(this.orgData, id)
      if (activeDept) {
        activeDept.selected = true
        activeDept.expand = true
        this.activeDept = {
          ...activeDept,
          callLineInfo: activeDept.callLineInfo || {}
        }
        this.onGetDeptData(activeDept.id)
        this.onGetEmployeeData(activeDept.id)
      }
    },
    onFindNodeInOrgData(orgData, id) {
      for (let i = 0; i < orgData.length; i++) {
        if (orgData[i].id === id) {
          return orgData[i]
        } else {
          if (orgData[i].children && orgData[i].children.length) {
            return this.onFindNodeInOrgData(orgData[i].children, id)
          } else {
            return null
          }
        }
      }
    },
    onUpdateDept(row) {
      this.currentDept = row
      this.deptInfo.deptName = row.deptName
      this.deptInfo.remark = row.remark
      this.deptVisible = true
    },
    async onDeleteDept(id) {
      const response = await deleteDept({ id })
      if (response.code === 1000) {
        this.$Message.success('删除成功')
        this.onGetDeptData(this.activeDept.id)
        this.onInitData()
      }
    },
    onSetDeptSuper(row) {
      if (!this.employeeData || !this.employeeData.length) {
        this.$Message.warning('请先添加部门成员')
        return
      }
      this.superVisible = true
      this.activeSuperDept = row
    },
    onCancelAddSuper() {
      this.$refs.superInfo.resetFields()
      this.superVisible = false
      this.superInfo = {
        supervisorIds: ''
      }
    },
    onConfirmAddSuper() {
      this.$refs.superInfo.validate(async (valid) => {
        if (valid) {
          this.deptLoading = true
          const response = await saveDept({
            id: this.activeSuperDept.id,
            supervisorIds: [this.superInfo.supervisorIds]
          })
          if (response.code === 1000) {
            this.activeSuperDept.supervisorIds = [this.superInfo.supervisorIds]
            this.$Message.success('设置成功')
          }
          this.deptLoading = false
          this.onCancelAddSuper()
        }
      })
    },
    onChangeDeptName() {
      this.isEditing = true
      this.deptName = this.activeDept.deptName
    },
    onCancelChangeDeptName() {
      this.isEditing = false
      this.deptName = ''
    },
    async onConfirmChangeDeptName() {
      if (!this.deptName) {
        this.$Message.warning('部门名称不能为空')
        return
      }
      if (this.deptName !== this.activeDept.deptName) {
        this.deptLoading = true
        const response = await saveDept({
          id: this.activeDept.id,
          deptName: this.deptName
        })
        if (response.code === 1000) {
          this.deptLoading = false
          this.$Message.success('编辑成功')
          this.activeDept.deptName = this.deptName
          this.breadData.pop()
          this.breadData.push({
            id: this.activeDept.id,
            deptName: this.activeDept.deptName
          })
          this.onCancelChangeDeptName()
        }
      }
    },
    async onInitData(superId) {
      this.deptLoading = true
      const response = await getDeptList({ superId })
      const data = response
      this.deptLoading = false

      let root
      const idMapping = data.reduce((acc, el, i) => {
        acc[el.id] = i
        return acc
      }, {})
      data.forEach(el => {
        if (el.superId === el.id) {
          root = el
        } else {
          const parentEl = data[idMapping[el.superId]]
          el.parent = parentEl
          parentEl.children = [...(parentEl.children || []), el]
        }
      })
      if (!superId) {
        root.expand = true
        root.selected = true
        this.deptData = (root.children || []).map(
          item => ({
            id: item.id,
            deptName: item.deptName,
            remark: item.remark,
            createTime: item.createTime,
            supervisorIds: item.supervisorIds
          })
        )
        this.deptData.unshift({
          id: root.id,
          deptName: root.deptName,
          remark: root.remark,
          createTime: root.createTime,
          supervisorIds: root.supervisorIds
        })
        this.activeDept = {
          ...root,
          callLineInfo: root.callLineInfo || {},
          isRoot: true
        }
        this.onGetEmployeeData(root.id)
      }
      this.orgData = [root]
    },
    async onInitRoleUserData(roleCode) {
      this.deptLoading = true
      const response = await getRoleUserList({ roleCode })
      this.roleUserData = response || []
      this.deptLoading = false
    },
    async onGetDeptData(superId) {
      this.deptLoading = true
      const response = await getDeptList({ superId })
      const data = response
      this.deptData = data
      this.deptLoading = false
    },
    async onGetEmployeeData(deptId) {
      this.employeeLoading = true
      const response = await getDeptEmployees({ deptId })
      const data = response || []
      if (Array.isArray(data)) {
        this.employeeData = data.sort((a, b) => b.status - a.status)
      } else {
        this.employeeData = []
      }
      this.employeeLoading = false
    },
    onAddDept() {
      this.deptVisible = true
    },
    onCancelAddDept() {
      this.$refs.deptInfo.resetFields()
      this.deptVisible = false
      this.deptInfo = {
        deptName: '',
        remark: ''
      }
    },
    onConfirmAddDept() {
      this.$refs.deptInfo.validate(async (valid) => {
        if (valid) {
          this.deptLoading = true
          const response = this.currentDept.id ? await saveDept({
            id: this.currentDept.id,
            ...this.deptInfo
          }) : await saveDept({
            superId: this.activeDept.id,
            ...this.deptInfo
          })
          if (response.code === 1000) {
            this.$Message.success('操作成功')
            this.onCancelAddDept()
            this.onInitData()
          }
          this.deptLoading = false
        }
      })
    },
    async onAddEmployee() {
      const response = await getDeptEmployees({})
      this.employeeOccupied = (response || []).map(e => e.userId)
      const employeesCanAdd = this.allUsers.filter(item => !this.employeeOccupied.includes(item.userId))
      if (employeesCanAdd.length) {
        this.employeesCanAdd = employeesCanAdd
        this.employeeVisible = true
      } else {
        this.$Message.warning('无可添加成员，请先注册')
      }
    },
    onCancelAddEmployee() {
      this.$refs.employeeInfo.resetFields()
      this.employeeVisible = false
      this.employeeInfo = {
        userIds: []
      }
    },
    onConfirmAddEmployee() {
      this.$refs.employeeInfo.validate(async (valid) => {
        if (valid) {
          this.employeeLoading = true
          const response = await saveDeptEmployee(
            this.employeeInfo.userIds.map(userId => ({ deptId: this.activeDept.id, userId }))
          )
          if (response.code === 1000) {
            this.$Message.success('添加成功')
            this.onCancelAddEmployee()
            this.onGetEmployeeData(this.activeDept.id)
          }
          this.employeeLoading = false
        }
      })
    },
    onAssignEmployeeRole(row) {
      this.activeEmployee = row
      this.$nextTick(() => {
        this.employeeRoleVisible = true
        if (row.roleCodeList && row.roleCodeList.length) {
          this.employeeRoleInfo.roleCodeList = row.roleCodeList.filter(
            roleCode => !['L2'].includes(roleCode)
          )
        } else {
          this.employeeRoleInfo.roleCodeList = []
        }
      })
    },
    onCancelAddEmployeeRole() {
      this.$refs.employeeRoleInfo.resetFields()
      this.employeeRoleVisible = false
      this.employeeRoleInfo = {
        roleCodeList: []
      }
    },
    onConfirmAddEmployeeRole() {
      this.$refs.employeeRoleInfo.validate(async (valid) => {
        if (valid) {
          this.deptLoading = true
          const response = await saveEmployeeRole({
            deptId: this.activeEmployee.deptId,
            userId: this.activeEmployee.userId,
            roleCodeList: this.employeeRoleInfo.roleCodeList
          })
          if (response.code === 1000) {
            this.$Message.success('分配成功')
            this.onCancelAddEmployeeRole()
            this.onGetEmployeeData(this.activeDept.id)
          }
          this.deptLoading = false
        }
      })
    },
    async onDeleteDeptEmployee(row) {
      const response = await deleteDeptEmployee({ id: row.id })
      if (response.code === 1000) {
        this.$Message.success('删除成功')
        this.onGetEmployeeData(this.activeDept.id)
      }
    },
    onChangeRole(roleCode) {
      this.activeRole = this.roles.find(r => r.roleCode === roleCode)
      this.onInitRoleUserData(roleCode)
    },
    async onAddUser() {
      const response = await getRoleUserList({ roleCode: this.activeRole.roleCode })
      this.userOccupied = (response || []).map(i => i.userId)
      this.userVisible = true
    },
    onCancelAddUser() {
      this.$refs.userInfo.resetFields()
      this.userVisible = false
      this.userInfo = {
        userIds: []
      }
    },
    onConfirmAddUser() {
      this.$refs.userInfo.validate(async (valid) => {
        if (valid) {
          const response = await saveRoleUser(
            this.userInfo.userIds.map(userId => ({ roleCode: this.activeRole.roleCode, userId }))
          )
          if (response.code === 1000) {
            this.$Message.success('新增成功')
            this.onCancelAddUser()
            this.onInitRoleUserData(this.activeRole.roleCode)
          }
        }
      })
    },
    async onDeleteRoleUser(id) {
      const response = await deleteRoleUser({ id })
      if (response.code === 1000) {
        this.$Message.success('删除成功')
        this.onInitRoleUserData(this.activeRole.roleCode)
      }
    }
  },
  watch: {
    activeDept() {
      const breadData = []
      let parent = this.activeDept.parent
      while (parent) {
        breadData.unshift({
          id: parent.id,
          deptName: parent.deptName
        })
        parent = parent.parent
      }
      breadData.push({
        id: this.activeDept.id,
        deptName: this.activeDept.deptName
      })
      this.breadData = breadData
    }
  }
}
</script>
<style lang="less">
.org-role-container {
  min-height: calc(~"100vh - 115px");
  display: flex;
  position: relative;

  .org-role-tree-container {
    width: 250px;
    background: #fff;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .tree-data-container {
      width: 100%;
      padding: 0 10px 10px 10px;
      user-select: none;
    }

    .role-data-container {
      width: 100%;
      padding-top: 10px;

      .ivu-card-head {
        display: none;
      }

      .ivu-cell {
        &:hover {
          background: rgba(92, 173, 255, 0.2) !important;
        }

        &.selected {
          background: rgba(92, 173, 255, 0.2) !important;
        }

        &:nth-child(2n + 1) {
          background: #eee;
        }
      }
    }
  }

  .org-role-content-container {
    flex: 1;
    height: calc(~'100vh - 115x');
    overflow: auto;
    background: #fff;
    border-left: 1px solid #ddd;
    padding: 10px;

    .ivu-select-dropdown {
      .ivu-select-dropdown {
        min-width: 130px;

        .ivu-dropdown-item {
          width: 130px;
        }
      }
    }

    .ivu-breadcrumb {
      .breadcrumb-separator {
        display: inline-block;
        width: 8px;
        height: 8px;
        border: 2px solid #999;
        border-width: 2px 2px 0 0;
        transform: rotate(45deg);
      }

      .ivu-breadcrumb-item-separator {
        margin: 0 9px 0 2px;
        position: relative;
        top: -1px;
      }

      .ivu-breadcrumb-item-link {
        a {
          color: #2d8cf0;
        }
      }

      .last-breadcrumb {
        .ivu-breadcrumb-item-link {
          a {
            color: #000;
          }
        }
      }
    }

    h5 {
      font-size: 20px;
    }

    .dept {
      margin-top: 25px;
    }

    .employee {
      margin-top: 25px;
    }

    .form-container {
      height: 32px;
      margin: 0 0 10px 0;
    }
  }
}

.employee-modal {
  .ivu-form-item-label {
    width: 100%;
    text-align: left !important;
  }

  .ivu-checkbox-group-item {
    width: 11.11%;
    margin-right: 0;
  }
}

.employee-role-modal {
  .ivu-form-item-label {
    width: 100%;
    text-align: left !important;
  }

  .ivu-checkbox-group-item {
    width: 20%;
    margin-right: 0;
  }
}

.allocate-call-line-modal {
  .ivu-form-item {
    width: 100% !important;
  }

  .ivu-form-item-label {
    width: 100% !important;
    text-align: left !important;
  }

  .ivu-radio-group {
    width: 100%;
  }

  .ivu-radio-group-item {
    width: 20% !important;
    margin-right: 0 !important;
  }
}
</style>
